<template>
  <div class="corporate">
    <div class="logo">
      <div class="nav">
        <van-nav-bar left-arrow @click-left="$router.go(-1)">
          <template #right>
            <van-icon name="star-o" size="18" />
            <van-icon name="envelop-o" size="18" />
          </template>
        </van-nav-bar>
      </div>
      <div class="title">
        <div class="chuan">
          <span>传智播客</span>
        </div>
        <div class="jiaoyu">
          <span>在线教育</span>
          <span>B轮</span>
          <span>100-499</span>
        </div>
      </div>
      <div class="icon">
        <van-icon name="clock-o" size="18" /><span>上午9:00-下午6:00</span>
        <van-icon name="smile-o" size="18" /><span>双休</span>
        <van-icon name="tv-o" size="18" /><span>偶尔加班</span>
      </div>
      <div class="baoxian">
        <van-button plain type="info">
          <van-icon name="notes-o" size="18" />
          <span>医疗保险</span>
        </van-button>
        <van-button plain type="info">
          <van-icon name="shield-o" size="18" />
          <span>定期体检</span>
        </van-button>
        <van-button plain type="info">
          <van-icon name="after-sale" size="18" />
          <span>年终奖</span>
        </van-button>
      </div>
    </div>
    <div class="dizhi">
      <div>
        <van-nav-bar left-text="公司地址">
          <template #right>
            <span>全部地址</span>
            <van-icon name="arrow" size="18" />
          </template>
        </van-nav-bar>
      </div>
      <div class="daohang">
        <div class="beijing">
          <div class="beijinggg">
            <span>北京市 昌平区 传智播客</span>
          </div>
          <span class="buxing">距离当前50m， 步行需要57秒</span>
        </div>
        <div class="anniu">
          <van-button>
            <van-icon name="guide-o">导航</van-icon>
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'corporate'
}
</script>

<style lang="less">
.corporate {
  .logo {
    border-bottom: 1px solid #f7f4f5;
    .nav {
      // background: transparent;
      i.van-icon.van-icon-star-o {
        margin-right: 20px;
      }
    }
    .title {
      .chuan {
        span {
          font-size: 24px;
          margin-left: 10px;
        }
      }
      .jiaoyu {
        span {
          font-size: 14px;
          margin-left: 10px;
          padding: 4px;
          border: 1px solid #ccc;
          border-radius: 8px;
        }
      }
    }
    .icon {
      display: flex;
      align-items: center;
      margin-left: 10px;
      margin-top: 20px;
      span {
        font-size: 12px;
        padding-right: 20px;
      }
    }
    .baoxian {
      margin: 10px 0 20px 10px;
      button.van-button.van-button--info.van-button--normal.van-button--plain {
        margin-right: 20px;
        border-radius: 10px;
      }
    }
  }
  .dizhi {
    span.van-nav-bar__text {
      font-size: 20px;
      color: #000;
      font-weight: 500;
    }
    .van-nav-bar__right {
      color: #5b5d75;
      i.van-icon.van-icon-arrow {
        color: #5b5d75;
      }
    }
    .daohang {
      position: relative;
      .beijing {
        .beijinggg {
          font-size: 18px;
          color: #181a39;
          margin-left: 18px;
        }
        .buxing {
          font-size: 12px;
          color: #b4b4bd;
          margin-left: 18px;
        }
      }
      button.van-button.van-button--default.van-button--normal {
        position: absolute;
        top: 10px;
        right: 10px;
        border-radius: 20px;
        padding: 0 20px;
        color: #5B5D75;
        border-color: #5B5D75;
      }
    }
  }
}
</style>
